// Global Variables
$primary-color: #2C7A7B;
$primary-light: #E6FFFA;
$secondary-color: #666666;
$background-color: #f8f8f8;
$border-color: #E2E8F0;
$text-color: #333333;
$text-light: #999999;
$white: #ffffff;
$success-color: #38A169;
$danger-color: #E53E3E;

// Shadows
$shadow-sm: 0 2rpx 12rpx rgba(44, 122, 123, 0.05);
$shadow-md: 0 4rpx 16rpx rgba(44, 122, 123, 0.08);
$shadow-lg: 0 6rpx 20rpx rgba(44, 122, 123, 0.12);

// Border Radius
$radius-sm: 8rpx;
$radius-md: 16rpx;
$radius-lg: 24rpx;
$radius-full: 999rpx;

// Spacing
$spacing-xs: 8rpx;
$spacing-sm: 16rpx;
$spacing-md: 24rpx;
$spacing-lg: 32rpx;
$spacing-xl: 40rpx;

// Typography
$font-size-xs: 24rpx;
$font-size-sm: 26rpx;
$font-size-md: 28rpx;
$font-size-lg: 32rpx;
$font-size-xl: 36rpx;

// Font Weights
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// Transitions
$transition-fast: 0.2s ease;
$transition-base: 0.3s ease;
$transition-slow: 0.4s ease;

// Global Animations
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY($spacing-lg);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-$spacing-lg);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Global Classes
.text-primary {
  color: $primary-color;
}

.text-secondary {
  color: $secondary-color;
}

.text-light {
  color: $text-light;
}

.bg-primary {
  background-color: $primary-color;
}

.bg-white {
  background-color: $white;
}

.bg-light {
  background-color: $background-color;
}

.rounded-sm {
  border-radius: $radius-sm;
}

.rounded-md {
  border-radius: $radius-md;
}

.rounded-lg {
  border-radius: $radius-lg;
}

.rounded-full {
  border-radius: $radius-full;
}

.shadow-sm {
  box-shadow: $shadow-sm;
}

.shadow-md {
  box-shadow: $shadow-md;
}

.shadow-lg {
  box-shadow: $shadow-lg;
}

.transition {
  transition: all $transition-base;
}

.hover-scale {
  &:hover {
    transform: scale(1.02);
  }
}

.hover-shadow {
  &:hover {
    box-shadow: $shadow-md;
  }
}

// Layout Classes
.container {
  padding: $spacing-md;
  min-height: 100vh;
  background-color: $background-color;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.gap-sm {
  gap: $spacing-sm;
}

.gap-md {
  gap: $spacing-md;
}

.gap-lg {
  gap: $spacing-lg;
}
